<template>
  <a-card :bordered="false" style="margin-top: 48px;">
    <a-form
      :form="form"
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
    >
      <a-form-item label="所属部门">{{ userInfo.deptName }}</a-form-item>
      <a-form-item label="用户编号">{{ userInfo.userCode }}</a-form-item>
      <a-form-item label="用户姓名">{{ userInfo.realName }}</a-form-item>
      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="登录名"
      >
        <a-input
          v-decorator="['userName', { rules: [{ required: true, message: '请输入登录名' }] }]"
          placeholder="请输入登录名"
        />
      </a-form-item>
      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="邮箱"
      >
        <a-input v-decorator="['email', { rules: [] }]" placeholder="请输入邮箱" />
      </a-form-item>
      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="工作机号"
      >
        <a-input v-decorator="['workPhone', { rules: [] }]" placeholder="请输入工作机号" />
      </a-form-item>
      <a-form-item
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        label="手机号"
      >
        <a-input v-decorator="['mobile', { rules: [] }]" placeholder="请输入手机号" />
      </a-form-item>
    </a-form>
    <a-row>
      <a-col :span="formItemLayout.labelCol.span"></a-col>
      <a-col :span="formItemLayout.wrapperCol.span">
        <a-button type="info" style="margin-right:24px;" @click="$router.go(-1)">取消</a-button>
        <a-button type="primary" @click="handleConfirm">确定</a-button>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
import { basicService } from '@/services';

const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 },
};

export default {
  name: 'userProfile',

  data() {
    return {
      formItemLayout,
      id: 0,
      userInfo: {},
      form: this.$form.createForm(this, { name: 'profile-form' }),
    };
  },

  created() {
    const userInfo = JSON.parse(localStorage.getItem(process.env.VUE_APP_USER_KEY));
    console.log('--------------------', userInfo);
    this.id = userInfo.id;
    this.getUserInfo();
  },

  methods: {
    getUserInfo() {
      const id = this.id;
      basicService.getUserInfo({ id }).then(res => {
        if (res.code === '200') {
          this.userInfo = res.data;
          this.$nextTick(() => {
            this.form.setFieldsValue({
              userName: this.userInfo.userName,
              email: this.userInfo.email,
              workPhone: this.userInfo.workPhone,
              mobile: this.userInfo.mobile,
            });
          });
        } else {
          console.log('获取个人信息失败');
        }
      });
    },

    handleConfirm() {
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values);
          basicService
            .updateUser({
              id: this.userInfo.id,
              deptId: this.userInfo.deptId,
              userCode: this.userInfo.userCode,
              realName: this.userInfo.realName,
              userStatus: this.userInfo.userStatus,
              password: null,
              confirmPassword: null,
              ...values,
            })
            .then(res => {
              console.log(res);
              if (res.data.code === '200') {
                this.$message.success('保存成功');
                this.getUserInfo();
              } else {
                this.$message.error(res.data.msg);
              }
            })
            .catch(e => {
              console.log(e);
              this.$message.fail(e);
            });
        }
      });
    },
  },
};
</script>

<style lang="less"></style>
